#school-course {
  user-select: none;

  margin: 50px 0;

  h3 {
    // 去除h3标签默认的上下margin
    margin-block-start: 0;
    margin-block-end: 0;

    height: 36px;
    line-height: 36px;
    font-size: 24px;
    font-weight: 500;
  }

  .options-lesson {
    .el-row {
      .el-col {
        margin: 8px 0;
        font-size: 12px;

        &:last-child {
          div {

            span {
              // 右对齐
              float: right;
            }
          }

        }

        div {


          span {

            padding: 0px 24px 0px 0;
            cursor: pointer;

            &:hover {
              cursor: pointer;
            }

          }
        }
      }
    }
  }

  &>.el-row {
    // ------------------flex布局,让flex布局能够自动换行
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: space-between;
    // ------------------flex布局,让flex布局能够自动换行--结束
    height: fit-content;
    margin: 0 !important;


    .el-col {
      flex: 1;
      // -----------------若想让flex布局能够自动换行，则必须固定width，若设置max-width则当布局盒子总宽度小于该值时，则width会压缩失真
      width: 229px;
      min-width: 229px;
      max-width: 229px;
      // --------------------j结束
      height: fit-content;
      border-radius: 4px;
      padding: 0 !important;
      margin-bottom: 20px;
      background-color: #fff;

      // 阴影过渡
      transition: box-shadow .6s;

      &:hover {
        box-shadow: 0 5px 15px -5px rgba(0, 0, 0, .5);

        transition: box-shadow .6s;
      }

      .el-link.grid-content {
        display: block;
        border-radius: 4px;
        


        text-decoration: none;
        color: #333;
        text-align: start;
        font-size: 14px;

        img {
          width: 100%;
        }

        .lesson-bottom {

          height: 81px;
          padding: 14px;

          .lesson-name {

            // 实现多行文本溢出省略显示
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            height: 56px;

            b {
              font-size: 14px;
            }

            .school {
              font-size: 12px;
              margin-top: 8px;
            }

            .name {
              font-size: 12px;
              margin-top: 12px;
            }
          }

        }


        .lesson-info {
          font-size: 12px;

          span {
            text-align: start;

            &:last-child {
              float: right;

              &:before {
                margin-right: 3px;
              }
            }
          }
        }
      }
    }


  }

  .options-lesson-pages {

    // -------------------让分页水平居中对齐
    display: table;
    margin: 0 auto;

    padding: 30px 0 ;

    .el-pagination {
      // 适合内容
      width: fit-content;

    }
  }
}